<template>
  <div class="page-user-account">
    <el-page-header icon="" style="padding-bottom: 25px">
      <template #title>
        <div style="font-size: 18px">{{ lang.t('page.user.account.page_name') }}</div>
      </template>
      <template #content>
        <div style="font-size: 14px">{{ lang.t('page.user.account.page_content') }}</div>
      </template>
    </el-page-header>
    <div class="button">
      <el-button type="primary" size="large" @click="form.open({})">{{ lang.t('common.create') }}</el-button>
    </div>
    <List @form="data => form.open(data)" />
    <Form ref="form" />
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'

import List from './list'
import Form from './form'

export default {
  components: {
    List,
    Form
  },
  setup() {
    // 表单
    const form = ref(null)

    return {
      lang: app.lang,
      form
    }
  }
}
</script>